import * as React from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
  Appearance,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {dark, light} from '../../config';
import {pxToDp} from '../../utils/stylesKits';
import {Icon} from '@ant-design/react-native';

/**
 * APP PageHeader 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

function PageHeader(props) {
  const navigation = useNavigation();
  const {title, style} = props;
  return (
    <View style={{...styles.container, ...style}}>
      <TouchableOpacity style={styles.icon} onPress={() => navigation.goBack()}>
        <Icon name="arrow-left" color={colorScheme.color} size={pxToDp(24)} />
      </TouchableOpacity>
      <Text style={styles.title} numberOfLines={1} ellipsizeMode={'tail'}>
        {title}
      </Text>
      <Text />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    padding: pxToDp(15),
  },
  icon: {
    paddingRight: pxToDp(30),
  },
  title: {
    flex: 1,
    paddingRight: pxToDp(40),
    fontSize: pxToDp(20),
    color: colorScheme.color,
  },
});
export default PageHeader;
